<template>
	<div>
		<!--去掉右弹框顶部会有颜色的BUG-->
		<div style="height: 1px;background: #fff;"></div>
		<van-nav-bar
		  left-arrow
		  @click-left="onClickLeft"
		  :border="false"
		  
		>		
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>
		  <div slot="title" class="weight_header">
		  	我买到的
		  </div>
		 
	   </van-nav-bar>		
	   
	   
	   <div class="noData" v-if="showNoData">
	   	<img src="../../../../static/img/lanhu/noData.png" alt="" />
	   </div>
	   
	   
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="!showNoData">
		  <van-list
		    v-model="loading"
		    :finished="finished"
		    :finished-text="finishedText"
		    @load="onLoad"
		    :immediate-check="false"
		    loading-text=" "
		    :style="{minHeight: clientHeight + 'px' }"
		  >		  
		    <div class="li" v-for="(item,index) in list" :key="index" v-if="item.isShow">
		    	<div class="left imgWrap" :style="{backgroundImage: 'url(' + item.goodsImage + ')'}" @click="orderDetail(item)"></div>
		    	<div class="right">
		    		<div class="title" @click="orderDetail(item)">{{item.comName}}</div>
		    		<div class="price" @click="orderDetail(item)">实付款:¥ {{formatFixed2(item.ordersPrice)}}</div>
		    		<div class="oi" @click="orderDetail(item)">
                        {{formatOrderStatus(item.ordersState)}}
		    		</div>
		    		<div class="btn" style="border-bottom: 1px solid #f0f0f0;padding-bottom: 10px;">
		    			<div class='btn_left' @click="lxSeller(item)">
		    				<img src="../../../../static/img/lanhu/93.png" alt="" style="width: 91px;height:26px;"/>
		    			</div>
		    			<div class='btn_right'>
		    				<!--// 交易成功状态下 本方已完成评论-->		
			    			<div style="margin-right: 4px;" class="word1"
			    				 v-if="(item.ordersState==6&&item.commentCount>0)||item.ordersState==13"
			    				 @click="lookEvaluate(item)">
			    				 查看评价
			    			</div> 	
			    			<!--// 交易成功状态下 本方未完成评论-->	
			    			<div style="margin-right: 4px;" class="word1"  
			    				v-if="item.ordersState==4&&item.commentCount==0" 
			    				@click="evaluate(item,index)">
			    				评价
			    			</div>  
			    			<!--// 退款成功状态下--> 
			    			<div style="margin-right: 4px;" class="word1" v-if="item.ordersState==8" @click="seeRefundMoney(item)">查看钱款</div>  		
			    			<!--// 交易关闭状态下-->
			    			<div style="margin-right: 4px;" class="word1" v-if="item.ordersState==0||item.ordersState==10||item.ordersState==9" @click="delOrder2(item,index)">删除订单</div>
			    			<div class="word1" v-if="item.ordersState==4||item.ordersState==8||item.ordersState==6"    @click="showMore(item,index)">...</div>		    				
		    			</div>
		    		</div>
		    	</div>
		    </div>		  
		  </van-list>		  
		</van-pull-refresh> 		
		  
		  
		  
        <van-popup v-model="showMoreWin">
        	<div class="showMoreWin">
				<van-cell-group >
				  <van-cell title="查看钱款" @click="showMoneyDetailWin" v-if="currentData.ordersState==4"/>
				  <van-cell title="退款详情" @click="linkRefund" v-if="currentData.ordersState==8"/>
				  <van-cell title="宝贝快照" @click="linkShot"/>
				  <van-cell title="删除订单" @click="delOrder"/>
				</van-cell-group>        		
        	</div>
        </van-popup>
        
        
        <!--查看钱款弹框-->
		<van-popup
		  v-model="showMoneyDetail"
		  position="right"
		  :style="{ height: '100%',width:'100%' }"
		> 		   
		  <floor54 :detailInfo="detailInfo" @hidden="showMoneyDetail=false" type='2'></floor54>
		</van-popup>




		<!--评价弹框-->    
		<floor55  ref="floor55" @reload="reload"></floor55>
		
		<!--查看评价弹框-->
        <floor56  ref="floor56" ></floor56>
        
        
        <confirm ref="confirm2" @queryConfirm="queryConfirm2" title="确定删除该订单吗?"></confirm>  
       

	</div>	
</template>

<script>	
import Floor54 from '_c/market/floor/floor54.vue'	
import Floor55 from '_c/market/floor/floor55.vue'
import Floor56 from '_c/market/floor/floor56.vue'	
import confirm from '_c/confirm.vue'
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {
	components: {
	    confirm,Floor54,Floor55,Floor56
	},		
	data() {
       return { 
       	  loading: false,    // 是否处于数据加载状态 
	      finished: false,   // 是否处于数据最底部的状态 
	      refreshing: false, // 是否处于下拉刷新状态         
          pageNum:1,         // 当前数据的页码数
          pages:0,           // 储存数据的最大页码数
          list:[],            // 储存数据用
          showMoreWin:false,  // 显示...弹框
          showMoneyDetail:false, // 查看钱款弹框
          url1:this.$api+'/marketorderservice/api/v1/market/findBuyList',  // 卖出列表
          url2:this.$api+'/marketorderservice/api/v1/market/orders', // 订单详情
          url3:this.$api+'/marketorderservice/api/v1/market/deleteOrders', // 删除订单
          list:[],     // 发布列表
          currentData:{},     // 记录选中的当前数据
          currentDataIndex:'', // 记录当前选中数据的索引
          showNoData:false,// 是否显示暂无数据
          finishedText:'' ,
          userId:'',
          detailInfo:{},  
       }
	},
	methods: {
	   // 联系卖家
	   lxSeller(item){
	   	  this.getIm(item.goodsId,item.nickName,this.userId,item.userId,item.goodsImage,item.avatar,item.ordersId)
	   },
	   // 查看评价	
	   lookEvaluate(item){
	   	 this.$refs.floor56.showWin(item)
	   },
	   // 评论完刷新主页面	
	   reload(index){
	   	 let num=Number(this.list[index].commentCount)+1
	   	 this.list[index].commentCount=num.toString()
	   	 this.list[index].ordersState=6
	   },
	   // 评价订单 	 
	   evaluate(item,index){
	   	 this.$refs.floor55.showWin(item,index)
	   },
	   // 跳转到退款详情页	
	   linkRefund(){	     	
	   	  let arg='[{"refundId":"'+this.currentData.refundId+'"},{"ordersId":"'+this.currentData.ordersId+'"}]'
	   	  let url=this.concatUrl('/market/orders/refunds',arg)
	   	  this.goNewWin(url)	   	  
	   },
	   // 跳转到订单详情页	
	   orderDetail(item){
	   	  let arg='[{"ordersId":"'+item.ordersId+'"}]' 
	   	  this.link('/market/orders/details',arg)	   	
	   },
	   // ...操作	
	   showMore(item,index){
	   	 this.currentData=item
	   	 this.currentDataIndex=index
	   	 this.showMoreWin=true
	   },		
   	   // 跳转到宝贝详情页面
	   linkShot(){
	   	  let id=this.currentData.goodsId
	   	  let arg='[{"comId":"'+id+'"}]' 
		  this.link('/market/goods/snapshot',arg)	   		   	  
	   },
	   seeRefundMoney(item){	   	  
	   	  let arg='[{"ordersId":"'+item.ordersId+'"}]' 
	   	  this.link('/market/orders/refundMoney',arg)	    	 
	   },	   
	   // 查看钱款
	   showMoneyDetailWin(){
	   	  let ordersId=this.currentData.ordersId
	      let that = this;
	      this.$Axios.Get(this.url2 + "/" + ordersId + "/" + this.userId).then(function(res) {		      	 
	      	 that.detailInfo=res.data.orders
		   	 that.showMoreWin=false
		   	 that.showMoneyDetail=true	                
	      });	   	    	  
	   },
	   // 删除订单确认
	   queryConfirm2(){
	   	 let that=this
	   	 let params={
	   	 	ordersId:this.currentData.ordersId
	   	 }
	   	 this.$Axios2.Post(this.url3,params).then(function(res){
	   	 	that.list[that.currentDataIndex].isShow=false
	   	 })
	   },
	   // 点击 ... 后 下架宝贝操作
	   lower(){
	   	this.showMoreWin=false
        this.$refs.confirm1.showWin()  
	   },
	   // 点击 ... 后 删除订单操作
	   delOrder(){
	   	this.showMoreWin=false
	   	this.$refs.confirm2.showWin()
	   },
	   delOrder2(item,index){
	   	 this.currentData=item
	   	 this.currentDataIndex=index	 
	   	 this.$refs.confirm2.showWin()
	   },
	   // 下拉刷新函数	
	   onRefresh() {
		  setTimeout(() => {		  	  
	          this.pageNum=1
	          this.list=[]
	          this.getData()	
	          this.finished = false;
	          this.loading=false
			  this.refreshing = false;
		  }, 1000);          
	   },
	   // 上拉加载函数
	   onLoad(){	   	 
		 setTimeout(() => {		 	
	        if (this.refreshing) {
	          this.list = [];
	          this.refreshing = false;
	        }	
	        this.getData()
	      }, 1000);   	
	   },		
       // 获取数据
       getData(){
		  let that=this
		  let params={
		  	userId:this.userId
		  }
		  this.$Axios2.postRequest(this.url1,params,{pageNum:this.pageNum,pageSize:'5'}).then(function(res) {		  	
		  	if(res.data.page.total==0){
		  		that.showNoData=true
		  		return false
		  	}	  		  	
            if(that.pageNum>res.data.page.pages){
            	that.finishedText='我也是有底线的' 
            	that.finished = true;
            	return false
            }else{	  	
			    for(var i=0;i<res.data.page.records.length;i++){
			  		res.data.page.records[i].isShow=true
			    }
	            that.list=that.list.concat(res.data.page.records) 
	            that.pageNum++   //  下一次请求的时候页码加1	
	            that.loading = false;   // 关闭加载中
	            that.finished = false;  // 数据加载未完成	             	
            }
                    	                                      
		  })	      	
       }
	},
	mixins:[publicFun],	
	mounted() {
	    this.userId=this.$router.currentRoute.query.userId;
	    this.getData()
	}
}	
</script>

<style scoped="" lang="scss">
*{color: #333;}
.van-nav-bar{background: #FFD630;}
.li{padding: 20px 20px 10px;display: flex;
   .left{img{width: 92px;height: 92px;display: block;border-radius: 2px;}}
   .right{margin-left: 15px;flex: 1;
       .title{font-size: 15px;font-weight:bold;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
       .price{color: $fc1;margin: 14px 0;font-size: 14px;}
       .oi{span{color: $fc2;}}
       .btn{display: flex;justify-content: space-between;margin-top: 10px;
          .btn_left{}
          .btn_right{display: flex;
          	div{padding: 4px 12px;border:1px solid $bc1;font-size: 13px;}
          	.word1{display: flex;align-items: center;justify-content: center;box-sizing: border-box;height: 26px;}
          }
       }
   }
}
.imgWrap{width: 92px;height: 92px;overflow: hidden;background-repeat: no-repeat;background-size:cover;background-position: 50% 50%;border-radius: 4px;}
.li.active{border-bottom: none;}
.showMoreWin{width: 300px;background: #fff;}


.moreShareWrap{padding: 20px 15px 0;display: flex;
     .item{display: flex;flex-direction: column;margin-right: 10px;}
     .word{color: #333;margin-top: 8px;opacity: 0.8;text-align: center;}
     .img{width: 42px;height: 42px;}    
}
.van-popup{background: rgba(255,255,255,0.8);}
#more{ .cancle{padding: 12px 0;font-size: 16px;background: #fff;text-align: center;margin-top: 20px;}}
</style>